<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="/static/backend/Style/skin.css" />
    <script src="/static/incubator-echarts-4.2.1/incubator-echarts-4.2.1/dist/echarts.min.js"></script>
	<script src="/static/incubator-echarts-4.2.1/incubator-echarts-4.2.1/dist/echarts.js"></script>
	<script type="text/javascript" src="/static/jquery-3.3.1.min.js"></script>
	<title></title>
</head>
<body>
	
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!-- 头部开始 -->
            <tr>
                <td width="17" valign="top" background="/static/backend/Images/mail_left_bg.gif">
                    <img src="/static/backend/Images/left_top_right.gif" width="17" height="29" />
                </td>
                <td valign="top" background="/static/backend/Images/content_bg.gif">
                    <table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" background="/static/backend//static/backend/Images/content_bg.gif">
                        <tr><td height="31"><div class="title">添加栏目</div></td></tr>
                    </table>
                </td>
                <td width="16" valign="top" background="/static/backend/Images/mail_right_bg.gif"><img src="/static/backend/Images/nav_right_bg.gif" width="16" height="29" /></td>
            </tr>
            <!-- 中间部分开始 -->
            <tr>
                <!--第一行左边框-->
                <td valign="middle" background="/static/backend/Images/mail_left_bg.gif">&nbsp;</td>
                <!--第一行中间内容-->
                <td valign="top" bgcolor="#F7F8F9">
                    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                        <!-- 空白行-->
                        <tr><td colspan="2" valign="top">&nbsp;</td><td>&nbsp;</td><td valign="top">&nbsp;</td></tr>
                        <tr>
                            <td colspan="4">
                                <table>
                                    <tr>
                                        <td width="100" align="center"><img src="/static/backend/Images/mime.gif" /></td>
                                        <td valign="bottom"><h3 style="letter-spacing:1px;">查看图表</h3></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 一条线 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 产品列表开始 -->
                        <tr>
                        	<td><div id="main" style="width: 600px;height:400px;"></div></td>

                            
                        </tr>
                        <tr>
                          <td><div id="main1" style="width: 600px;height:400px;"></div></td>
                        </tr>
                        <!-- 产品列表结束 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        
                    </table>
                </td>
                <td background="/static/backend/Images/mail_right_bg.gif">&nbsp;</td>
            </tr>
            <!-- 底部部分 -->
            <tr>
                <td valign="bottom" background="/static/backend/Images/mail_left_bg.gif">
                    <img src="/static/backend/Images/buttom_left.gif" width="17" height="17" />
                </td>
                <td background="/static/backend/Images/buttom_bgs.gif">
                    <img src="/static/backend/Images/buttom_bgs.gif" width="17" height="17">
                </td>
                <td valign="bottom" background="/static/backend/Images/mail_right_bg.gif">
                    <img src="/static/backend/Images/buttom_right.gif" width="16" height="17" />
                </td>           
            </tr>
        </table>
   

</body>
<script type="text/javascript">
	 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据

     var arr1=[],arr2=[],arr3=[],arr4=[];
      function arrTest(){
        $.ajax({
          type:"post",
          data:{data:'111'},
          url:"/backend/graph/graph_data",
          async:false,
          dataType:"json",
          success:function(result){
            console.log('111');
            if (result) {
              for (var i = 0; i < result.length; i++) {
                  arr1.push(result[i].month);
                  arr2.push(result[i].result);
              }
            }
           console.log(arr1);
           console.log(arr2);
          }
        });
        return arr1,arr2;
        
      }
      arrTest();

      function arrTest1(){
                $.ajax({
                  type:"post",
                  data:{data:'111'},
                  url:"/backend/graph/data",
                 async:false,
                  dataType:"json",
                  success:function(result){
                    console.log('222');
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr3.push(result[i]);

                      }
                    }
                   
                    console.log(arr3);
                  }
                });
                return arr3;
                
              }
              arrTest1();
     function arrTest2(){
                $.ajax({
                  type:"post",
                  data:{data:'111'},
                  url:"/backend/graph/data2",
                 async:false,
                  dataType:"json",
                  success:function(result){
                    console.log('333');
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr4.push(result[i].result);

                      }
                    }
                   
                    console.log(arr4);
                  }
                });
                return arr4;
                
              }
              arrTest2();

        // 指定图表的配置项和数据
       var option = {
            title: {
                text: '常泷月销售额'
            },
            tooltip: {},
            legend: {
               
            },
            xAxis: {
                
                data:arr1
            },
            yAxis: {
                
            },
            series: [{
                    name:'销售额',
                    type:'line',
                    data:arr2
            },
            {
                    name:'销售总数',
                    type:'bar',
                    data:arr4
            },
             ]
           

        };
console.log(arr3[0]);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    
    <script>
        // 绘制图表。
        echarts.init(document.getElementById('main1')).setOption({
            series: {
                type: 'pie',
                data:arr3
                    
                    
                
            }
        });
    </script>
</html>